<template>
  <div v-if="warnList && warnList.length">
    <van-collapse v-model="activeNames">
      <!-- 预警信息-特殊处理 -->
      <van-collapse-item
        name="warnInfo"
        :title="`项目（${warnList.length}项）`"
      >
        <van-form ref="refWarnForm" :readonly="!hdEdit">
          <div class="project-name">
            <label>项目名称：</label>
            <span>{{ hdRowData.projectName }}</span>
          </div>
          <div class="score">
            <div>
              <van-col span="8">因子名称</van-col>
              <van-col span="7">标准分</van-col>
              <van-col span="9">结果</van-col>
            </div>
            <div v-for="(item, index) of warnList" :key="index">
              <van-col span="8">{{ item.factorName }}</van-col>
              <van-col class="name-score" span="6">{{ item.score }}</van-col>
              <van-col span="10">{{ item.totalRemark }}</van-col>
            </div>
          </div>
          <div
            v-for="(iData, index) of warnList"
            :key="index"
            style="margin-bottom: 30px"
          >
            <h4>{{ `${index + 1}、${iData.factorName}` }}</h4>
            <van-cell-group inset class="din-inset-group">
              <van-row>
                <van-col span="24">
                  <van-field label="测评结果" colon label-width="auto">
                    <template #input>
                      <span
                        >{{ iData.score
                        }}<span v-if="iData.factorName !== '阳性项目数'"
                          >分</span
                        >，
                        <span>{{ iData.totalRemark }}</span>
                      </span>
                    </template>
                  </van-field>
                </van-col>
                <van-col span="24">
                  <van-field label="得分解释" colon readonly></van-field>
                </van-col>
                <van-col span="24">
                  <van-field label="">
                    <template #input
                      ><span v-html="iData.explainRemark"></span
                    ></template>
                  </van-field>
                </van-col>
                <van-col span="24">
                  <van-field label="辅导建议" colon readonly> </van-field>
                </van-col>
                <van-col span="24">
                  <van-field label="">
                    <template #input
                      ><span v-html="iData.suggest"></span
                    ></template>
                  </van-field>
                </van-col>
              </van-row>
            </van-cell-group>
            <van-row
              v-if="
                hdRowData.gaugeName !== 'SCL-90症状自评表' &&
                hdRowData.gaugeName !== '心理健康诊断测验(MHT)'
                  ? true
                  : iData.factorName == '总分'
                  ? true
                  : false
              "
              class="et-wrapper"
            >
              <van-col span="24">
                <van-field
                  v-model="warnData.arr[index].proposalLevel"
                  name="proposalLevel"
                  label="建议等级"
                  colon
                  label-width="auto"
                  required
                  :readonly="!hdEdit"
                  :rules="
                    hdEdit
                      ? [{ required: true, message: '请选择预警等级' }]
                      : []
                  "
                >
                  <template #input>
                    <div
                      class="done-level"
                      @click.stop="showLevelSelectClick(warnData.arr[index])"
                    >
                      <span>{{
                        getLevelLabel(warnData.arr[index].proposalLevel) ||
                        '请选择预警等级'
                      }}</span>
                      <img :src="triangleSrc" />
                    </div>
                  </template>
                </van-field>
              </van-col>
              <van-col span="24">
                <van-field label="干预措施" colon required readonly></van-field>
              </van-col>
              <van-col span="24" class="text-area">
                <van-field
                  v-model="warnData.arr[index].coachDecs"
                  type="textarea"
                  show-word-limit
                  autosize
                  required
                  :readonly="!hdEdit"
                  name="coachDecs"
                  :rules="
                    hdEdit
                      ? [{ required: true, message: '请填写干预措施' }]
                      : []
                  "
                  maxlength="2000"
                  placeholder="请填写干预措施"
                />
              </van-col>
            </van-row>
          </div>
          <h4>预警结果</h4>
          <van-cell-group inset class="din-inset-group">
            <van-row>
              <van-col span="24">
                <van-field
                  v-model="hdRowData.projectName"
                  label="项目名称"
                  colon
                  label-width="auto"
                  readonly
                >
                </van-field>
              </van-col>
              <van-col span="24">
                <van-field
                  label="系统预警等级"
                  colon
                  label-width="auto"
                  :readonly="!hdEdit"
                >
                  <template #input>
                    <span
                      :style="{ color: colorList[warnData.systemLevel] }"
                      v-html="getLevelLabel(warnData.systemLevel)"
                    ></span>
                  </template>
                </van-field>
              </van-col>
              <van-col span="24">
                <van-field
                  label="老师建议等级"
                  colon
                  label-width="auto"
                  :readonly="!hdEdit"
                >
                  <template #input>
                    <span v-html="getLevelLabel(warnData.proposalLevel)"></span>
                  </template>
                </van-field>
              </van-col>
            </van-row>
          </van-cell-group>
        </van-form>
      </van-collapse-item>
    </van-collapse>
    <van-action-sheet
      v-model:show="showLevelSelect"
      teleport="body"
      :actions="levelOptions"
      @select="levelSelect"
    />
  </div>
</template>
<script lang="ts">
import { useStore } from '/@/store'
import { defineComponent, ref, computed } from 'vue'
import triangleSrc from '/@/assets/image/common/triangle-2x.png'

export default defineComponent({
  props: {
    hdEdit: Boolean, // 当前类型是否编辑的状态
    hdRowData: Object, // 当前类型处理的数据
    warnList: Array, // 预警信息
  },
  setup(props, _context) {
    const { commit, state } = useStore()
    let refWarnForm: any = ref(null)
    let hdRowData: any = props.hdRowData // 当前类型处理的数据
    let hdEdit: any = props.hdEdit // 当前类型是否编辑的状态
    let warnList: any = props.warnList // 预警信息
    let showLevelSelect: any = ref(false)
    let warnCurEditData: any = null
    // 预警处理的数据
    let warnData = ref({
      systemLevel: '', // 系统预警等级
      proposalLevel: '', // 老师建议等级
      arr: warnList,
    })
    const levelOptions = computed(() => state.levelOptions) // 所有预警级别
    warnData.value['systemLevel'] = computedFinishLevel('level') // 默认系统预警等级
    !hdEdit &&
      (warnData.value['proposalLevel'] = computedFinishLevel('proposalLevel')) // 老师预警等级
    console.log(warnList)
    // 计算最终的预警等级
    function computedFinishLevel(prop: string) {
      let levelArr = warnData.value['arr'].map((r: any) => Number(r[prop]))
      levelArr = levelArr.filter(
        (value: any) => typeof value === 'number' && value > 0
      ) // 取正数
      return !levelArr.length ? 0 : Math.min(...levelArr) // 取最小
    }

    const colorList = [
      'green',
      '#FF4500',
      '#FFA07A',
      '#FFD700',
      '#8552a1',
      '#0D8FBF',
    ]
    return {
      colorList,
      refWarnForm,
      triangleSrc,
      hdRowData,
      hdEdit,
      levelOptions,
      warnList,
      warnData,
      showLevelSelect,
      // 计算最终的预警等级
      computedFinishLevel,
      showLevelSelectClick(obj: any) {
        if (!hdEdit) {
          return
        }
        showLevelSelect.value = true
        warnCurEditData = obj
      },
      levelSelect(item: any) {
        warnCurEditData && (warnCurEditData['proposalLevel'] = item.value)
        showLevelSelect.value = false
        warnData.value['proposalLevel'] = computedFinishLevel('proposalLevel') // 计算最终的预警等级
      },
      getLevelLabel(level: any) {
        if (!level && level !== 0) {
          return ''
        }
        return (levelOptions.value.find((r: any) => level == r['value']) || {})[
          'name'
        ]
      },
      // 数据校验
      validData(showMsg = true) {},
      // 获取数据（外部组件调用）
      getData() {
        return new Promise((resolve, reject) => {
          refWarnForm.value.validate().then(
            () => {
              let data = {
                id: hdRowData.userProjectGaugeId,
                realName: hdRowData.realName,
                factorList: warnData.value['arr'].map((r: any) => {
                  return {
                    id: r.id,
                    proposalLevel: r.proposalLevel,
                    coachDecs: r.coachDecs,
                  }
                }),
              }
              resolve(data)
              return data
            },
            // 校验失败
            () => {
              refWarnForm.value.scrollToField()
              resolve(false)
            }
          )
        })
      },
    }
  },
  data() {
    return {
      activeNames: ['warnInfo'],
    }
  },
})
</script>

<style lang="less" scoped>
/deep/ .et-wrapper {
  form {
    width: 100%;
  }
  .van-row,
  .van-cell.van-field {
    background-color: #fff;
    padding: 4px;
  }
  .text-area {
    .van-cell.van-field {
      background-color: #f5f7f9;
      border-radius: 9px;
    }
  }
}
.done-level {
  color: #666;
  margin-right: 10px;
  img {
    margin-left: 4px;
    zoom: 0.7;
  }
}
/deep/ .van-cell-group--inset {
  margin: 0;
}
.din-inset-group {
  margin-bottom: 20px !important;
}

.score {
  font-size: 13px;
  padding-bottom: 10px;
  > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0px;
    margin-top: 2px;

    .name-score {
      color: orange;
    }
  }

  > div:nth-child(2n) {
    background-color: rgb(243, 247, 249);
  }

  > div:first-child {
    font-weight: bold;
  }
}
</style>
